
<!DOCTYPE html>
<html lang="en">
{% load static %}

<head>
    <meta charset="UTF-8">
    <title>动物列表</title>

<link rel="stylesheet" type="text/css" href="{%  static 'css/jquery.dataTables.css' %}">
{#<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />#}

<!-- jQuery -->
{#<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>#}
<script type="text/javascript" charset="utf8" src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
<!-- DataTables -->
{#<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/dataTables.dataTables.min.js"></script>#}
<script type="text/javascript" charset="utf8" src="{%  static 'js/jquery.dataTables.js' %}"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<style type="text/css">
    #back_to_index {
	border: 1px dotted #000;
    color: #34ce57;
	padding: 10px;
	}
</style>
</head>

<body>


{#  <section id="about">#}
{#    <div class="container">#}
{#      <div class="row">#}
{#        <div class="col-lg-8 mx-auto">#}
{#          <h2>动物列表</h2>#}
{#          <p></p>#}
{##}
{#      </div>#}
{#    </div>#}
{#  </section>#}
<div><p><br></p></div>
<div align="center" style="width: 100%">
  <table  id="example" class="display" style="width: 100%">
    <thead>
    <tr>
{#        <th class="text-center" align="left">查看</th>#}
        <th class="text-center" align="left">id</th>
        <th class="text-center" align="left">动物名称</th>
        <th class="text-center" align="left">动物品系</th>
        <th class="text-center" align="left">饲养环境</th>
        <th class="text-center" align="left">饲养设施</th>
        <th class="text-center" align="left">生物学信息</th>
        <th class="text-center" align="left">动物供应商</th>
        <th class="text-center" align="left">库存数量</th>
    </tr>
    </thead>
</table>
<div align="left">
    <button type="button" class="back1" id="back_to_index">
        返回
    </button>
</div>
</div>




</body>
<script type="text/javascript">
    $(document).ready(function () {
        var tables = $('#example').DataTable({
            'ajax': '/animal/', // json的url
            'columns': [

                {#{'data': 'det'},#}
                {'className':'details-control',
                'orderable': true,
                'data': 'id',
                'defaultContent': '',
                'render': function(data,type,row) { return '<a href="../detail/'+data+'/1/"> '+data+' </a>'; }},
                {'data': 'animal_name'},
                {'data': 'animal_detail'},
                {'data': 'animal_env'},
                {'data': 'animal_facility'},
                {'data': 'animal_bio'},
                {'data': 'animal_supplier'},
                {'data': 'animal_num'},
            ],
            {#dom: 'Bfrtip',#}
            {#button: [#}
            {#    'copy', 'print'#}
            {#],#}

            'language': {
                'url': '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json' // 以中文显示
            }
        });

    } );



        <!--{#var data = tables.row( $(this).parents('tr') ).data();#}-->
		 <!--{#               $.ajax({#}-->
        <!--{#            url:'/detail/'+data.id +'/1/',#}-->
        <!--{#            type:'get',#}-->
        <!--{#            timeout:"3000",#}-->
        <!--{#            cache:"false",#}-->
        <!--{#            success:function(str){#}-->
        <!--{#                if(str.data){#}-->
        <!--{#                    window.location.reload();#}-->
        <!--{#                }#}-->
        <!--{#            },#}-->
        <!--{#            error:function(err){#}-->
        <!--{#                alert("获取数据失败");#}-->
        <!--{#            }#}-->
        <!--{#        });#}-->


</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#back_to_index").click(function(){
           window.open("../index/","_self");//在自身的窗体打开，不会新建窗体
        });
  });
</script>
</html>
